<template>
  <div class="article_list">
    <!-- :success-text="successText" -->
    <van-pull-refresh
      v-model="isLoading"
      :head-height="80"
      :success-duration="1500"
      @refresh="onRefresh"
    >
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://img01.yzcdn.cn/vant/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>
      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png" />
      </template>
      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg" />
      </template>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell
          v-for="item in resultsList"
          :key="item.art_id"
          :title="item.title"
        /> -->
        <!-- 渲染 articlesItem 组件 -->
        <articles-item
          v-for="(item, index) in resultsList"
          :key="index"
          :articles="item"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from "@/request/articles";
import articlesItem from "@/components/articlesItem/articlesItem";

export default {
  props: {
    channels: {
      type: Object,
      required: true,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      resultsList: [],
      loading: false,
      finished: false,
      timestamp: null,
      isLoading: true
      // successText: null,
    };
  },
  components: {
    articlesItem
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // const a = _getArticles(this.channels.id, this.timestamp || Date.now(), 1);
      // console.log(a);
      const { data } = await getArticles({
        channel_id: this.channels.id,
        timestamp: this.timestamp || Date.now(),
        with_top: 1
      });
      const { results } = data.data;
      this.resultsList.push(...results);
      this.loading = false;
      // console.log(this.resultsList);
      if (results.length) {
        this.timestamp = data.data.pre_timestamp;
      } else {
        this.finished = true;
      }
    },
    // 下拉刷新时触发
    async onRefresh() {
      const { data } = await getArticles({
        channel_id: this.channels.id,
        timestamp: Date.now(),
        with_top: 1
      });
      const { results } = data.data;
      this.resultsList.unshift(...results);
      // this.successText = "刷新了" + results.length + "条数据";
      this.isLoading = false;
    }

    // async _getArticles(id = 0, time = Date.now(), top = 1) {
    //   const { data } = await getArticles({
    //     channel_id: id,
    //     timestamp: time,
    //     with_top: top,
    //   });
    //   const { results } = data.data;
    //   return results;
    // },
  }
};
</script>

<style lang="less" scoped>
.article_list {
  position: fixed;
  left: 0;
  right: 0;
  top: 90px;
  bottom: 50px;
  overflow-y: auto;
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
}
</style>